<template>
  <div :id="row.peCode+row.peId">
    <el-button v-show="showTran1" type="success" size="mini" :loading="loading1" plain style="float: left; margin-left:0px; margin-right: 10px" @click="handleClick1">{{buttonName1}}</el-button>
    <el-button v-show="showTran2" type="primary" size="mini" :loading="loading2" plain style="float: left; margin-left:0px; margin-right: 10px" @click="handleClick2">{{buttonName2}}</el-button>

    <el-checkbox-group
      v-model="submitLocal"
      v-show="showTran3"
      style="float: left; margin-top: 5px"
      :min="1"
      :max="4">
      <el-checkbox v-for="item in codeResponse" :label="item.value" :key="item.key" :value="item.key" size="mini">{{item.value}}</el-checkbox>
    </el-checkbox-group>
    <el-button v-show="showTran3" type="success"  size="mini" :loading="loading3" plain style="float: left" @click="handleClick2Submit" >{{buttonName3}}</el-button>
    <el-button v-show="showTran3" type="info"  size="mini" plain style="float: left" @click="handleClick2Close" >取消</el-button>

    <el-button v-show="showTran5" type="danger"  size="mini" :loading="loading5" plain style="float: left; margin-left:0px; margin-right: 10px" @click="handleClose" >{{buttonName5}}</el-button>
    <el-button v-show="showTran6" type="success" size="mini" :loading="loading6" plain style="float: left; margin-left:0px; margin-right: 10px" @click="handleClick6" >{{buttonName6}}</el-button>
  </div>
</template>
<script>
import {eventStart, eventReStart, eventClose, eventSubmit, eventFinish} from '@/api/events'
export default {
  name: 'startPop',
  data() {
    var checkBlockDescript = (rule, value, callback) => {!value?callback(new Error('请输入阻塞原因')):callback()}
    return {
      showTran1: false,
      showTran2: false,
      showTran3: false,
      showTran4: false,
      showTran5: false,
      showTran6: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      buttonName1: '确认分配',
      buttonName2: '代码提交',
      buttonName3: '确认',
      buttonName4: '申请测试',
      buttonName5: '关闭事件',
      buttonName6: '返回分配',
      submitLocal: ['SIT', 'UAT'],
      title: '确认完成该任务吗？',
      peStatus: -1,
      devStatus: 0,
      showForm: false,
      disabled: false,
      form: {
        blockDescript: ''
      },
      rules: {
        blockDescript: [{ validator: checkBlockDescript, trigger: 'blur' }],
      },
      codeResponse: [ //'SIT', 'UAT', 'PP', 'PI']
        {key: 1, value: 'SIT'},
        {key: 2, value: 'UAT'},
        {key: 3, value: 'PP'},
        {key: 4, value: 'PI'},
      ]
    };
  },
  props: ['row'],
  methods: {
    showFormMethod() {
      this.showForm = true
    },
    handleClick1() {
      this.loading1 = true
      this.buttonName1 = '操作中...'
      let tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then( _ => {
        eventStart(this.row.peId).then(response => {
          for (let i=0; i<tableData.length; i++) {
            if (this.row.peId===tableData[i].peId) {
              tableData[i].devStatus=0
              tableData[i].peStatus=0
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading1 = false
          this.buttonName1 = '确认分配'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.showTran1 = false
          this.sleep(500).then( _ => {
            this.showTran2 = true
            this.showTran3 = true
            this.showTran4 = true
          })
        })
      })
    },
    handleClick2() {
      this.loading2 = true
      this.buttonName2 = '选择中...'
      this.showTran3 = true
      this.showTran1 = false
      this.showTran2 = false
      this.showTran4 = false
      this.showTran5 = false
      this.showTran6 = false
    },
    handleClick2Close() {
      this.loading2 = false
      this.buttonName2 = '代码提交'
      this.showTran1 = false
      this.showTran2 = true
      this.showTran3 = false
      this.showTran4 = false
      this.showTran5 = true
      this.showTran6 = false
    },
    handleClick2Submit() {
      this.loading2 = false
      this.loading3 = true
      this.buttonName2 = '代码提交'
      this.buttonName3 = '确认中...'
      let tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then( _ => {
        eventSubmit(this.row.peId, this.submitLocal).then(_ => {
           for (let i=0; i<tableData.length; i++) {
            if (this.row.peId===tableData[i].peId) {
              tableData[i].devStatus=2
              tableData[i].peStatus=0
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading3 = false
          this.buttonName3 = '确认'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.devStatus = 2
          this.tranShow()
        })
      })
    },
    handleClick3() {
      this.loading3 = true
      this.buttonName3 = '确认中...'
      let tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then( _ => {
        taskTest(this.row.taskId).then( response => {
          for (let i=0; i<tableData.length; i++) {
            if (this.row.peId===tableData[i].peId) {
              tableData[i].devStatus=2
              tableData[i].peStatus=0
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading3 = false
          this.buttonName4 = '开始测试'
          this.showTran4 = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.showTran1 = false
          this.showTran3 = false
          this.sleep(500).then( _ => {
            this.showTran2 = true
            this.showTran4 = true
          })
        })
      })
    },
    submitBlock(formName) {
        this.loading2 = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sleep(1500).then( _ => {
              this.buttonName3 = '操作中...'
              this.loading2 = true
              this.disabled = true
              taskBlock(this.row.taskId, this.form.blockDescript).then(response => {
                this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 3)
                this.loading2 = false
                this.disabled = false
                this.showForm = false
                this.buttonName2 = '返回开发'
                this.buttonName3 = '阻塞任务'
                this.title = '确认返回该任务状态?'
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.showTran1 = false
                this.showTran2 = false
                this.showTran3 = false
                this.showTran4 = false
                this.sleep(500).then( _ => {
                  this.showTran2 = true
                })
              })
            })
          }
        })
    },
    handleClose() {
      this.loading5 = true
      this.buttonName5 = '操作中...'
      let tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then( _ => {
        eventClose(this.row.peId).then(response => {
          for (let i=0; i<tableData.length; i++) {
            if (this.row.peId===tableData[i].peId) {
              tableData[i].devStatus=5
              tableData[i].peStatus=2
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading5 = false
          this.buttonName5 = '关闭事件'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.peStatus = 2
          this.tranShow()
        })
      })
    },
    handleClick6() {
      this.loading6 = true
      this.buttonName6 = '操作中...'
      let tableData = this.$parent.$parent.$parent.$parent.tableData
      this.sleep(1500).then( _ => {
        eventReStart(this.row.peId).then(response => {
          for (let i=0; i<tableData.length; i++) {
            if (this.row.peId===tableData[i].peId) {
              tableData[i].peStatus=0
              tableData[i].devStatus=1
              this.$parent.$parent.$parent.$parent.showPOP(this.row)
            }
          }
          this.loading6 = false
          this.buttonName6 = '返回分配'
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.peStatus = 0
          this.devStatus = 1
          this.tranShow()
        })
      })
    },
    sleep(time) {
      return new Promise((resolve) => {
        setTimeout(resolve, time)
      });
    },
    init() {
      this.peStatus = this.row.peStatus
      this.devStatus = this.row.devStatus
      this.tranShow()
    },
    tranShow() {
        this.showTran1 = false
        this.showTran2 = false
        this.showTran3 = false
        this.showTran4 = false
        this.showTran5 = false
        this.showTran6 = false
      // 事务状态为待解决
      if (this.peStatus===0) {
        // 开发状态待确认
        if (this.devStatus===0) {
          this.showTran1 = true
          this.showTran5 = true
        }
        // 开发状态已分配
        if (this.devStatus===1) {
          this.showTran2 = true
          this.showTran5 = true
        }
        // 已提交代码的
        if (this.devStatus===2) {

        }
      }
      if (this.peStatus===1) {
        // 已完成
        this.showTran1 = false
        this.showTran2 = false
        this.showTran3 = false
        this.showTran4 = false
        this.showTran5 = false
        this.showTran6 = false
      }
      if (this.peStatus===2) {
        // 打开恢复
        this.showTran1 = false
        this.showTran2 = false
        this.showTran3 = false
        this.showTran4 = false
        this.showTran5 = false
        this.showTran6 = true
      }
    }
  },
  mounted() {
    this.init()
    this.tranShow()
    this.$nextTick(function() {
      this.init()
    })
  },
  created() {
    this.init()
  }
};
</script>

<style>
  .el-checkbox {
    margin-right: 5px !important;
  }
  .el-checkbox__label {
    padding-left: 3px !important;
    padding-right: 5px !important;
  }
</style>
